<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微嘉电影</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.min.js"></script>
    <!-- 导入字体图标库 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

    <style>
        *{
            outline: none;
            padding: 0;
            margin: 0;
            text-decoration: none;
        }
        body{
            display: flex;
            height: 100vh;
            background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
        }
        .top{
            height: 80px;
            width: 100%;
            border-bottom: 2px solid #edeef0;
            margin: 0 auto;
            text-align: center;
        }
        .top .menu{
            padding: 0 50px;
            height: 80px;
            display: inline-block;
            line-height: 80px;
            text-align: center;
            font-size: 18px;
            color: white;
            text-shadow: 0 0 0.1em, 0 0 0.3em;
            text-decoration: none;
        }
        .top .menu:hover{
            background-color: #edeef0;
            color: salmon;
            /*text-shadow: 0 0 0, 0 0 0;*/
        }
        #logo{
            position: absolute;
            margin-top: 5px;
            width: 97px;
            height: 73px;
        }
        #title{
            position: absolute;
            margin-left: 90px;
            width: 97px;
            height: 78px;
            font-size: 20px;
            line-height: 78px;
            font-family: Microsoft JhengHei;
            font-weight: bold;
        }
        #icon{
            position: absolute;
            margin-top: 3px;
            margin-left: 30px;
            line-height: 50px;
            color: #ff8500;
        }
        .login{
            position: absolute;
            line-height: 80px;
            margin-left: 300px;
            text-decoration: none;
            font-size: 18px;
            color: white;
            text-shadow: 0 0 0.1em, 0 0 0.3em;
        }
        #movie{
            background-color: #edeef0;
            color: salmon;
        }

    </style>
</head>

<body>
<img id="logo" :src="/static/img/logo.png">
<span id="title">微嘉电影</span>

<div class="top" id="app">
    <a class="menu" id="home" href="#">首页</a>
    <a class="menu" id="movie" href="#">电影</a>
    <a class="menu" id="cinema" href="#">影院</a>
    <a class="menu" id="top" href="#">榜单</a>
    <a class="menu" id="hot" href="#">热点</a>
    <a class="login" href="#">登录</a>

    <div class="container">
        <div>

        </div>
        <div style="height: 80px;text-align: center;line-height: 80px" class="row">
            1<div class="col">
            <ul class="nav text-dark">
                <li :id='"type"+index' v-for="(type,index) in typeList" @click="resultName(index,type)" target="_blank"
                    :class=" resultNum === index?'active':''" style="margin: 0 auto"
                >{{type.typename}}&nbsp;
            </ul>
        </div>
        </div>
        <div style="height: 80px;text-align: center;line-height: 80px" class="row">
            2<div class="col">
            <ul class="nav text-dark">
                <li :id='"country"+index1' v-for="(country,index1) in countryList" @click="resultLevel(index1,country)" target="_blank"
                    :class=" resultNum1 === index1?'active':''"  style="margin: 0 auto"
                >{{country.country}}&nbsp;
            </ul>
        </div>
        </div>
        <div style="height: 80px;text-align: center;line-height: 80px;margin-bottom: 25px" class="row">
            3<div class="col">
            <ul class="nav text-dark">
                <li :id='509'  @click="resultEquipment(18,null)" target="_blank"
                    :class=" resultNum2 === 18?'active':''"  style="margin: 0 auto"
                >全部&nbsp;
                <li :id='"year"+index2' v-for="(year,index2) in yearList" @click="resultEquipment(index2,year)" target="_blank"
                    :class=" resultNum2 === index2?'active':''"  style="margin: 0 auto"
                >{{year}}&nbsp;
                <li :id='499'  @click="resultEquipment(19,10)" target="_blank"
                    :class=" resultNum2 === 19?'active':''"  style="margin: 0 auto"
                >2000-2010&nbsp;
                <li :id='500'  @click="resultEquipment(12,90)" target="_blank"
                    :class=" resultNum2 === 12?'active':''"  style="margin: 0 auto"
                >90年代&nbsp;
                <li :id='501'  @click="resultEquipment(13,80)" target="_blank"
                    :class=" resultNum2 === 13?'active':''"  style="margin: 0 auto"
                >80年代&nbsp;
                <li :id='502'  @click="resultEquipment(14,0)" target="_blank"
                    :class=" resultNum2 === 14?'active':''"  style="margin: 0 auto"
                >更早&nbsp;
            </ul>
        </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div style="border: 1px solid black; height: 800px">
                    <div style="width: 186px;height: 295px;text-align: center" class="content m-4 float-start border" v-for="m in movieList">
                        <a class="poster" href="#"><img :src="m.poster" style="width: 185px;height: 257px"></a>
                        <div style="font-size: 22px;position: absolute;margin-top: -35px;margin-left: 5px">{{m.title}}</div>
                        <div style="font-size: 16px;position: absolute;margin-top: -30px;margin-left: 100px">{{m.score}}</div>
                        <div style="margin-top: 5px">
                            <button class="btn btn-sm btn-outline-danger" @click="buyTickets(m)">购票</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>




<script>
    var app = new Vue({
        el: "#app",
        data: {
            movieList: [],
            countryList: [],
            typeList:[],
            cinemaEquipmentList:[],
            active: -1,
            num: "",
            num1: "",
            num2: "",
            name: "",
            type: {
                id:"",
                typeName:""
            },
            country:{
              id:"",
              country:""
            },
            year: "",
            yearList:[2022,2021,2020,2019,2018,2017,2016,2015,2014,2013,2012,2011]
        },
        methods: {
            resultName(index,type) {
                this.num = index;
                app.type = type;
                console.log(app.type)
                this.showMovieList();
            },
            resultLevel(index1,country) {
                this.num1 = index1;
                app.country = country;
                console.log(app.country);
                this.showMovieList();
            },
            resultEquipment(index2,year) {
                this.num2 = index2;
                app.year = year;
                console.log(app.year);
                this.showMovieList();
            },
            showMovieList: function () {

                $.post("/movie/searchMovieByCondition", {
                    typeId: this.type.id,
                    countryId: this.country.id,
                    year: this.year,
                    orderNum: 1
                }, function (d) {
                    app.movieList = d;
                });
            },
            showCountryList: function () {
                $.post("/country/selectAllCountry", {}, function (d) {
                    app.countryList = d;
                });
            },
            showTypeList: function () {
                $.post("/type/selectAllType", {}, function (d) {
                    app.typeList = d;
                    alert(app.typeList)
                });
            },

        },
        computed: {

            resultNum() {

                return this.num;

            },
            resultNum1() {

                return this.num1;

            },
            resultNum2() {

                return this.num2;

            }

        },
        mounted: function () {
            this.showMovieList();
            this.showCountryList();
            this.showTypeList();
        }
    });
</script>
<style type="text/css">
    .active {

        background-color: aqua;

    }
</style>


</body>


</html>